import * as echarts from "echarts";

export const answerrate = (myChart, answeRate) => {
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          //   borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: "bold",
        //   },
        // },
        labelLine: {
          show: false,
        },
        data: [
          { value: 100 - answeRate, name: "未接听率" },
          { value: answeRate, name: "接听率" },
        ],
      },
    ],
  });
};

export const proportioncustomers = (myChart, data) => {
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          //   borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: "bold",
        //   },
        // },
        labelLine: {
          show: false,
        },
        data: [
          { value: data.call_sum - data.intent_A_B, name: "无意向数" },
          { value: data.intent_A_B, name: "A/B意向数" },
        ],
      },
    ],
  });
};

// export const outcall = (myChart) => {
//   myChart.setOption({
//     tooltip: {
//       trigger: "item",
//     },
//     series: [
//       {
//         name: "Access From",
//         type: "pie",
//         radius: ["40%", "70%"],
//         avoidLabelOverlap: false,
//         itemStyle: {
//           //   borderRadius: 10,
//           borderColor: "#fff",
//           borderWidth: 2,
//         },
//         label: {
//           show: false,
//           position: "center",
//         },
//         // emphasis: {
//         //   label: {
//         //     show: true,
//         //     fontSize: 40,
//         //     fontWeight: "bold",
//         //   },
//         // },
//         labelLine: {
//           show: false,
//         },
//         data: [
//           { value: 484, name: "外呼接通" },
//           { value: 800, name: "外呼未通" },
//         ],
//       },
//     ],
//   });
// };

export const callduration = (myChart) => {
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          //   borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: "bold",
        //   },
        // },
        labelLine: {
          show: false,
        },
        data: [
          { value: 184, name: "通话时长" },
          { value: 200, name: "通话时长1" },
        ],
      },
    ],
  });
};

export const lineoutcall = (myChart, date) => {
  myChart.setOption({
    title: {
      text: "外呼数据图表",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: [
        "累计外呼数量",
        "已接听",
        "未接听",
        "空关停",
        "拒接",
        "无法接通",
        "接通率",
      ], //是否可以选择展示的数据
      selected: {
        //默认不展示的数据
        未接听: false,
        空关停: false,
        拒接: false,
        无法接通: false,
      },
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: date.datearr,
      },
    ],
    yAxis: [
      {
        type: "value",
        position: "left",
        axisLabel: {
          formatter: "{value} 通",
        },
      },
      {
        type: "value",
        name: "Evaporation",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          //   lineStyle: {
          //     color: #fff
          //   }
        },
        axisLabel: {
          formatter: "{value} %",
        },
      },
    ],
    series: [
      {
        name: "累计外呼数量",
        type: "line",
        //   stack: 'Total',
        smooth: true, //true 为平滑曲线，false为直线
        // label: {
        //   show: true,
        //   position: "top",
        // },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: date.call_sumarr,
      },
      {
        name: "已接听",
        type: "line",
        //   stack: 'Total',
        areaStyle: {},
        smooth: true, //true 为平滑曲线，false为直线
        // label: { //展示点位具体数值
        //   show: true,
        //   position: "top",
        // },
        emphasis: {
          focus: "series",
        },
        data: date.success_sumarr,
      },
      {
        name: "未接听",
        type: "line",
        //   stack: 'Total',
        areaStyle: {},
        smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: [500, 530, 720, 700, 890, 1001, 1030],
      },
      {
        name: "空关停",
        type: "line",
        //   stack: 'Total',
        areaStyle: {},
        smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: [400, 430, 620, 600, 790, 901, 930],
      },
      {
        name: "拒接",
        type: "line",
        //   stack: 'Total',
        areaStyle: {},
        smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: [300, 330, 520, 500, 690, 801, 830],
      },
      {
        name: "无法接通",
        type: "line",
        //   stack: 'Total',
        areaStyle: {},
        smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: [200, 230, 420, 400, 590, 701, 730],
      },
      {
        name: "接通率",
        type: "line",
        yAxisIndex: 1,
        //   stack: 'Total',
        // areaStyle: {},
        // smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: date.success_ratearr,
      },
      //   {
      //     name: "Direct",
      //     type: "line",
      //     //   stack: 'Total',//相加总和
      //     areaStyle: {},
      //     smooth: true, //true 为平滑曲线，false为直线
      //     emphasis: {
      //       focus: "series",
      //     },
      //     data: [320, 332, 301, 334, 390, 330, 320],
      //   },
    ],
  });
};

export const bigcallduration = (myChart, date) => {
  myChart.setOption({
    title: {
      text: "通话时长图表",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["通话总时长", "通话平均时长"], //是否可以选择展示的数据
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: date.datearr,
      },
    ],
    yAxis: [
      {
        type: "value",
        position: "left",
        axisLabel: {
          formatter: "{value} 秒",
        },
      },
      {
        type: "value",
        name: "Evaporation",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          //   lineStyle: {
          //     color: #fff
          //   }
        },
        axisLabel: {
          formatter: "{value} 秒",
        },
      },
    ],
    // 146, 158, 197
    series: [
      {
        name: "通话总时长",
        type: "line",
        //   stack: 'Total',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgb(93, 137, 250)" },
            { offset: 0.9, color: "transparent" },
          ]),
        },
        // smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: date.call_duration_sumarr,
      },
      {
        name: "通话平均时长",
        type: "line",
        yAxisIndex: 1,
        //   stack: 'Total',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgb(247, 207, 118)" },
            { offset: 0.9, color: "transparent" },
          ]),
        },
        // smooth: true, //true 为平滑曲线，false为直线
        emphasis: {
          focus: "series",
        },
        data: date.call_duration_avgarr,
      },
    ],
  });
};

export const duiintention = (myChart, selected, date) => {
  myChart.setOption({
    title: {
      text: "意向标签数据图表",
    },
    legend: {
      selected,
    },
    tooltip: {},
    xAxis: [
      {
        type: "category",
        data: date.datearr,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "A（有明确意向）",
        type: "bar",
        // barWidth: 5,
        stack: "Search Engine",
        // emphasis: {
        //   focus: 'series'
        // },
        data: date.Aarr,
      },
      {
        name: "B（可能有意向）",
        type: "bar",
        stack: "Search Engine",
        // emphasis: {
        //   focus: 'series'
        // },
        data: date.Barr,
      },
      {
        name: "C（明确拒绝）",
        type: "bar",
        stack: "Search Engine",
        // emphasis: {
        //   focus: 'series'
        // },
        data: date.Carr,
      },
    ],
  });
};
export const yuanintention = (myChart, selected, date) => {
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      selected,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: date.A, name: "A（有明确意向）" },
          { value: date.B, name: "B（可能有意向）" },
          { value: date.C, name: "C（明确拒绝）" },
        ],
      },
    ],
  });
};
